<!-- 培训订单 -->
<template>
  <div>
    <div v-if="detail.Charges" class="list">
      <template v-for="(item, index) in detail.Charges">
        <!-- 参报培训科目 -->
        <div v-if="item.Code == 'Train'" :key="index" class="gl_mb_20">
          <el-divider content-position="left">
            <span class="divider_title">{{ item.Name }}</span>
          </el-divider>
          <el-table :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="培训科目" />
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
            <el-col :span="6" align="right">
              <span>共报：{{ item.ItemsCount }} 项科目</span>
            </el-col>
            <el-col :span="6" align="right" class="gl_pr_20">
              <span>合计：<span>{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 参报考试科目 -->
        <div v-if="item.Code == 'Exam'" :key="index" class="gl_mb_20">
          <el-divider content-position="left">
            <span class="divider_title">{{ item.Name }}</span>
          </el-divider>
          <el-table :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="考试科目" />
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
            <el-col :span="6" align="right">
              <span>共报：{{ item.ItemsCount }} 项科目</span>
            </el-col>
            <el-col :span="6" align="right" class="gl_pr_20">
              <span>合计：<span>{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 食宿费用 -->
        <div v-if="item.Code == 'Hotel'" :key="index" class="gl_mb_20">
          <el-divider content-position="left">
            <span class="divider_title">{{ item.Name }}</span>
          </el-divider>
          <el-table :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="酒店名称" />
            <el-table-column prop="RoomType" label="房型" />
            <el-table-column prop="DinnerType" label="餐食" :width="160" />
            <el-table-column prop="DayCount" label="天数" :width="140">
              <template slot-scope="{ row }">
                <span>{{ row.DayCount }}天</span>
              </template>
            </el-table-column>
            <el-table-column prop="Comment" label="备注" :width="220">
              <template slot-scope="{ row }">
                <span>{{ row.Comment || '- -' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
            <el-col :span="6" align="right">
              <span>共选：{{ item.ItemsCount }} 家</span>
            </el-col>
            <el-col :span="6" align="right" class="gl_pr_20">
              <span>合计：<span>{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 会员费用 -->
        <div v-if="item.Code == 'Membership'" :key="index" class="gl_mb_20">
          <el-divider content-position="left">
            <span class="divider_title">{{ item.Name }}</span>
          </el-divider>
          <el-table :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="会员类型" />
            <el-table-column prop="YearCount" label="年限" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.YearCount }}年</span>
              </template>
            </el-table-column>
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
            <el-col :span="6" align="right">
              <span>共计：{{ item.ItemsCount }} 个</span>
            </el-col>
            <el-col :span="6" align="right" class="gl_pr_20">
              <span>合计：<span>{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 其他费用 -->
        <div v-if="item.Code == 'Other'" :key="index" class="gl_mb_20">
          <el-divider content-position="left">
            <span class="divider_title">{{ item.Name }}</span>
          </el-divider>
          <el-table :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="费用名称" />
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
            <el-col :span="6" align="right">
              <span>共计：{{ item.ItemsCount }} 项</span>
            </el-col>
            <el-col :span="6" align="right" class="gl_pr_20">
              <span>合计：<span>{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-divider />
      <!-- 总计 -->
      <template>
        <el-row class="summary_wrap" type="flex" justify="end">
          <el-col :span="4">
            <ul class="summary_list">
              <li v-for="(item, index) in detail.Charges" :key="index" class="summary_item gl_clear">
                <span class="gl_fl">{{ item.Name }}</span>
                <span class="gl_fr">{{ formatMoney(item.CategoryAmount) }} 元</span>
              </li>
              <li class="summary_item summary_total gl_clear">
                <span class="gl_fl">已缴纳费用：</span>
                <span class="gl_fr">{{ formatMoney(detail.PaidAmount) }} 元</span>
              </li>
              <el-divider />
              <li class="summary_item summary_total gl_clear">
                <span class="gl_fl">合计</span>
                <span class="gl_fr money_color">{{ formatMoney(detail.TotalAmount) }} 元</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingOrder',
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>

<style scoped>
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.money_color {
  color: #f56c6c;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: auto;
}
.summary_item {
  font-size: 14px;
  color: #353434;
  line-height: 24px;
}
.summary_item.summary_total {
  font-weight: bold;
}
</style>
